<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/loaders.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/common.css"/>
</head>

<body>
<div id="wrap">
    <div id='header'>
        <div class="adpt"></div>
        <h1 id="pageTitle" onclick="jsFn.openDebug()" tapmode>首页</h1>
        <div class="adpt"></div>
    </div>

    <div id="main">
        <div id="loading">
            <div class="loader-inner ball-clip-rotate">
                <div></div>
            </div>
        </div>
    </div>
    <div id="tab">
        <div onclick="switchTab(0)" tapmode id="tab1" class="tab1a">&nbsp;</div>
        <div onclick="switchTab(1)" tapmode id="tab2">&nbsp;</div>
        <div onclick="switchTab(2)" tapmode id="tab3">&nbsp;</div>
    </div>
</div>
</body>
<script type="text/javascript" src="../assets/js/api.js"></script>
<script type="text/javascript" src="../assets/js/common.js"></script>
<script type="text/javascript">

    function switchTab(index, reload) {
        setTabIndex(index);
        api.setFrameGroupIndex({
            name  : 'tabGroup',
            reload: !!reload,
            index : index
        });
    }

    function setTabIndex(index) {
        var tab1 = $api.byId('tab1');
        var tab2 = $api.byId('tab2');
        var tab3 = $api.byId('tab3');
        var title = $api.byId('pageTitle');

        switch (index) {
            case 0:
                $api.addCls(tab1, 'tab1a');
                $api.removeCls(tab2, 'tab2a');
                $api.removeCls(tab3, 'tab3a');
                title.innerText = '首页';
                break;
            case 1:
                $api.removeCls(tab1, 'tab1a');
                $api.addCls(tab2, 'tab2a');
                $api.removeCls(tab3, 'tab3a');
                title.innerText = '问诊';
                break;
            case 2:
                $api.removeCls(tab1, 'tab1a');
                $api.removeCls(tab2, 'tab2a');
                $api.addCls(tab3, 'tab3a');
                title.innerText = '我的';
                break;
        }
    }

    apiready = function () {

        api.setStatusBarStyle({style: 'dark'});

        var header = $api.byId('header');
        var footer = $api.byId('tab');
        var headerH = $api.fixStatusBar(header);
        var footerH = $api.fixTabBar(footer);


        var resHost = jsFn.resHost();
        var token = jsFn.getToken();
        var frameGroupOptions = {
            name         : 'tabGroup',
            rect         : {marginTop: headerH, marginBottom: footerH, w: 'auto'},
            scrollEnabled: false,
            preload      : 0,
            frames       : [{
                name        : 'tab1',
                url         : resHost + '/home',
                headers     : {'X-Token': token},
                useWKWebView: true,
                bounces     : true
            }, {
                name        : 'tab2',
                url         : resHost + '/inquiry',
                headers     : {'X-Token': token},
                useWKWebView: true,
                bounces     : true
            }, {
                name        : 'tab3',
                url         : resHost + '/mine',
                headers     : {'X-Token': token},
                useWKWebView: true,
                bounces     : true
            }]
        };

        if (jsFn.isOnline()) {

            api.openFrameGroup(frameGroupOptions, function (ret, err) {
                setTabIndex(ret.index);
            });

            api.setFrameClient({frameName: 'tab1'}, function (ret, err) {
                if (ret.state === 2) {
                    setTimeout(function () {
                        $api.remove($api.byId('loading'));
                    }, 1500);
                }
            });

        } else {
            jsFn.openOffline();
        }

        api.addEventListener({name: 'offline'}, function (ret, err) {
            jsFn.toast('网络已断开');
            jsFn.openOffline();
        });
        api.addEventListener({name: 'online'}, function (ret, err) {
            jsFn.toast('网络已连接');
            jsFn.rebootApp();
        });

        api.addEventListener({name: 'smartupdatefinish'}, function (ret, err) {
            jsFn.alert('更新完成');
            jsFn.rebootApp();
        });

    };
</script>

</html>
